<!-- Bubble.vue 消息气泡组件 -->
<template>
	<div class="bubble-container">
		<div class="bubble" :class="{ 'self-bubble': message.isSelf }">
			<div class="text" v-html="message.content"></div>
		</div>
	</div>
</template>

<script setup>
defineProps({
	message: { type: Object, required: true }
})
</script>

<style scoped>
.bubble-container {
	display: flex;
	flex-direction: column;
}

.bubble {
	padding: 8px 12px;
	border-radius: 5px;
	background: white;
	position: relative;
	max-width: 400px;
}

.self-bubble {
	background: #95ec69;
}

.bubble::before {
	content: '';
	position: absolute;
	width: 0;
	height: 0;
	top: 12px;
}

.bubble:not(.self-bubble)::before {
	left: -6px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-right: 6px solid white;
}

.self-bubble::before {
	right: -6px;
	border-top: 6px solid transparent;
	border-bottom: 6px solid transparent;
	border-left: 6px solid #95ec69;
}

.text {
	word-break: break-word;
}
</style>
